<template>
	<view class="homepage" :style="$theme.pageStyle">


		<view class="bar">
			<u-navbar :placeholder="true" bgColor="#FFFFFF">
				<template #left>
					<view class="titleclass">
						个人中心
					</view>
				</template>
			</u-navbar>
		</view>


		<view class="people" v-if="isLogin == 1">
			<view class="headImg">
				<u-avatar :src="User.avatar" size="60" shape="circle"></u-avatar>
			</view>
			<view class="info" @click="ToUrl('/pages/center/seting/index')">
				<view class="nick">
					<text>{{User.nickname}}</text>
				</view>
				<view class="grade">
					<view>
						<text>{{User.account}}</text>
					</view>
				</view>
			</view>
			<view class="space">
				<!-- <uni-icons type="gear" size="20"></uni-icons> -->
				<u-icon name="setting" color="#000000" size="20"></u-icon>
			</view>
		</view>

		<view class="people" @click="ShowLogin()" v-else>
			<view class="headImg">
				<u-avatar :src="logo" size="60" shape="circle"></u-avatar>
			</view>
			<view class="info">
				<view class="nick">
					<text>登录</text>
				</view>
				<view class="grade">
					<view>
						<text>登录后查看更多</text>
					</view>
				</view>
			</view>
			<view class="space">
				<u-icon name="arrow-right" color="#000000" size="20"></u-icon>
			</view>
		</view>
		
		<view class="list">
			<view class="item">
				<view class="text">
					<text class="n-font">{{User.follow ? User.follow : 0}}</text>
					<text>关注</text>
				</view>
				<u-line direction="col" color="#979797 " length="50rpx"></u-line>
			</view>
			<view class="item" @click="ToUrl('/pages/center/coupon')">
				<view class="text n-font">
					<text class="n-font">{{User.coupon ? User.coupon : 0}}</text>
					<text>优惠券</text>
				</view>
				<u-line direction="col" color="#979797 " length="50rpx"></u-line>
			</view>
			<view class="item">
				<view class="text">
					<text class="n-font">{{User.integral ? User.integral : 0}}</text>
					<text>积分</text>
				</view>
				<u-line direction="col" color="#979797 " length="50rpx"></u-line>
			</view>
			<view class="item" @click="ToUrl('/pages/center/money/balance')">
				<view class="text">
					<text class="n-font">{{User.user_money ? User.user_money : 0}}</text>
					<text>余额</text>
				</view>
			</view>
		</view>
		
		<view class="vip-bg">
			<view class="taocan">
				<view class="title">我的权益</view>
				<view class="desc" v-if="User.is_promoter === 0">暂未购买</view>
				<view class="desc" v-else>分销权限</view>
			</view>
			<view class="cu-btn" v-if="User.is_promoter === 0" @click="goHref('/distribution/join/join')">
				购买
			</view>
			<view class="cu-btn" v-else @click="goHref('/distribution/index/index')">
				查看
			</view>
		</view>
		
		

		<view v-for="(item, index) in pages" :key="index">

			<template v-if="item.name == 'user-banner'">
				<view class="banner translate-y-0" v-if="item.content.data.length">
					<swiper class="swiper h-full" :autoplay="true">
						<swiper-item v-for="(it, i) in item.content.data" :key="i" @click="ToUrl(it.link.query.url)">
							<image :src="getImageUrl(it.image)" mode="widthFix" style="width: 100%;"></image>
						</swiper-item>
					</swiper>
				</view>
			</template>

			<template v-if="item.name == 'my-service'">
				<view class="aui-white-box">
					<view class="aui-flex">
						<view class="aui-flex-box">
							<h2>{{item.title}}</h2>
						</view>
					</view>
					<view class="aui-palace">
						<view class="aui-palace-grid" v-for="(it , i) in item.content.data" :key="i">
							<view class="aui-palace-grid-icon" @click="ToUrl(it.link.path)">
								<image :src="getImageUrl(it.image)" mode=""></image>
							</view>
							<view class="aui-palace-grid-text">
								<h2>{{it.name}}</h2>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<tabbar />
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				loginPop: false,
				value: 1,
				value1: 0,
				isLogin: '',
				User: {},
				pages: {},
				logo: uni.getStorageSync('app_logo'),
				link: '',
				img: uni.getStorageSync('placard'),
				code: ''
			}
		},
		onLoad() {
			this.getDecorate();
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.isLogin = 0
				console.log(222)
			} else {
				this.isLogin = 1
				this.getuser()
				console.log(111)
				//this.getopenid()
			}
		},
		methods: {
			ShowLogin(){
				this.loginPop = true
			},
			closeLoginPopup(){
				this.loginPop = false
			},
			getDecorate() {
				$H.get('index/decorate', {
					id: 2
				}, {
					token: false
				}).then(res => {
					this.pages = JSON.parse(res.data.data)
				})
			},
			getImageUrl(url) {
				return uni.getStorageSync('oss_domain') + url
			},
			ToUrl(url) {
				if (uni.getStorageSync('token') == '') {
					this.ShowLogin()
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			getopenid() {
				uni.login({
					success: res => {
						//小程序appid
						$H.post('user/updataopenid', {
							code: res.code
						}, {
							token: true
						}).then(res => {
			
						})
					}
				});
			},
			getuser() {
				$H.post('user/center', {
				}, {
					token: true
				}).then(res => {
					this.User = res.data
					// this.code = res.data.invite_code
					// uni.setStorageSync('my_invite_code', res.data.invite_code)
					// this.link = '/pages/index/index?invite_code=' + this.code
					uni.setStorageSync('user_avatar', res.data.avatar)
				})
			},
		}
	}
</script>

<style>
	page{
		background: linear-gradient(180deg, #fff, #fff 54%, hsla(0, 0%, 100%, 0));
	}
</style>
<style lang="scss" scoped>
	.titleclass {
		// font-family: 'jiangxincnfont';
	}
	

	.banner {
		height: 200rpx;
		margin: 20rpx;
		margin-bottom: 20px;
	}

	.homepage {
		width: 100%;
		height: 1624rpx;
		background: linear-gradient(1deg, rgba(247, 240, 255, 0.1900) 0%, rgba(229, 232, 255, 0.2000) 68%, rgba(231, 228, 255, 0.6600) 100%);
		& text {
			color: #333333;
			font-family: PingFangSC-Semibold, PingFang SC;
		}

		.bar {
			.right {
				display: flex;

				& view {
					width: 52rpx;
					height: 52rpx;
					margin-left: 26rpx;
					background: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;

					>image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.people {
			padding: 0 42rpx 28rpx 32rpx;
			display: flex;
			align-items: center;
			background: #ffffff;

			.headImg {
				>image {
					width: 60px;
					height: 60px;
					border-radius: 50%;
					background: #FFFFFF;
					border: #FFFFFF 1px solid;
				}
			}

			.info {
				flex: 1;
				margin-left: 15px;

				.nick {
					display: flex;

					>text {
						font-size: 18px;
						font-weight: 600;
						line-height: 22px;
					}

					.sex {
						width: 24rpx;
						height: 24rpx;
						border-radius: 12rpx;
						background: #61C9FD;
					}
				}

				.grade {
					display: flex;
					align-items: center;
					margin-top: 10px;

					>view {
						display: flex;
						align-items: center;
						margin-right: 12rpx;

						& text {
							font-size: 12px;
							font-weight: 600;
							color: #333333;
							line-height: 28rpx;
							// text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.5000);
						}

						& image {
							width: 28rpx;
							height: 30rpx;
						}

						&:last-child {
							>image {
								width: 40rpx;
								height: 40rpx;
							}

							>text {
								margin-left: -6rpx;
							}
						}
					}
				}

				.userId {
					width: 220rpx;
					display: flex;
					background: #F5F5FF;
					border-radius: 8rpx;
					box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1400), 0rpx -4rpx 6rpx 0rpx #FFFFFF;

					>image {
						width: 36rpx;
						height: 40rpx;
					}

					.number {
						flex: 1;
						display: flex;
						justify-content: center;

						>text {
							font-size: 24rpx;
							font-weight: 600;
							line-height: 40rpx;

							&:last-child {
								font-weight: 500;
								font-size: 22rpx;
								margin-left: 8rpx;
							}
						}
					}
				}
			}

			.space {
				display: flex;
				align-items: center;

				>text {
					font-size: 28rpx;
					line-height: 40rpx;
					margin-right: 10px;
				}
			}
		}

		.list {
			width: 100%;
			display: flex;
			padding: 0 44rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			padding-bottom: 20px;
			border-radius: 0px 0px 20px 20px;
			border-bottom: 0 .2rem 1rem rgba(0, 0, 0, .05);
			;

			.item {
				width: 25%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.text {
					display: flex;
					flex-direction: column;
					align-items: center;

					>text:first-child {
						font-size: 36rpx;
						font-family: "SemiBold";
						line-height: 48rpx;
						font-weight: 600;
					}

					>text:last-child {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin-top: 5px;
					}
				}
			}
		}

	}

	.aui-white-box {
		background: #fff;
		border-radius: 8px;
		width: 94%;
		margin: 0 auto 0.8rem;
		//box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
		margin-top: 15px;
		.aui-flex {
			display: flex;
			align-items: center;
			padding: 15px;
			position: relative;
			padding-bottom: 5px;

			.aui-flex-box {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				min-width: 0;
				font-size: 14px;
				color: #333;
			}

			.aui-flex-box h2 {
				color: #343434;
				font-weight: bold;
				font-size: 0.92rem;
			}

			.aui-arrow {
				position: relative;
				padding-right: 0.8rem;
			}

			.aui-arrow span {
				font-size: 0.8rem;
				color: #9b9b9b;
			}

			.aui-arrow:after {
				content: " ";
				display: inline-block;
				height: 6px;
				width: 6px;
				border-width: 2px 2px 0 0;
				border-color: #9b9b9b;
				border-style: solid;
				-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				position: relative;
				top: -2px;
				position: absolute;
				top: 50%;
				margin-top: -4px;
				right: 2px;
				border-radius: 1px;
			}
		}

		.aui-palace {
			padding: 0.5rem 0;
			position: relative;
			overflow: hidden;

			.aui-palace-grid {
				position: relative;
				float: left;
				padding: 1px;
				width: 25%;
				box-sizing: border-box;
				margin: 5px 0;
				margin-top: 10px;

				.aui-palace-grid-icon {
					width: 45px;
					height: 45px;
					margin: 0 auto;
				}

				.aui-palace-grid-icon image {
					display: block;
					width: 100%;
					height: 100%;
					border: none;
				}

				.aui-palace-grid-text {
					display: block;
					text-align: center;
					color: #4b4b4b;
					font-size: 0.85rem;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					padding-top: 8px;
				}

				.aui-palace-grid-text h2 {
					font-size: 0.8rem;
					font-weight: normal;
					color: #4b4b4b;
				}

			}
		}

	}


	.aui-card-list {
		margin: 15px;
		height: 55px;
		border-radius: 15px;
		background-image: -webkit-gradient(linear, left top, right top, from(#ecbf8b), to(#fcd9b0));
		background-image: -webkit-linear-gradient(left, #ecbf8b, #fcd9b0);
		background-image: -moz-linear-gradient(left, #ecbf8b, #fcd9b0);
		background-image: linear-gradient(to right, #ecbf8b, #fcd9b0);
		box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05);
		transition: 0.3s all cubic-bezier(0, 1, 0.95, 1.05);
		background-color: #ecbf8b;
		margin-bottom: 22px;
		// width: 100%;
		box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .1);

		.aui-well-item {
			padding: 10px;
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
		}

		.aui-well-item-hd {
			margin-right: .8em;
			width: 35px;
			height: 35px;
			line-height: 35px;
			text-align: center;
		}

		.aui-well-item-hd image {
			width: 100%;
			max-height: 100%;
			vertical-align: top;
			display: block;
			border: none;
		}

		.aui-well-item-bd {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			min-width: 0;
		}

		.aui-well-item-bd h3 {
			color: #a36c3b;
			font-size: 0.9rem;
		}

		.aui-well-item-fr {
			font-size: 0.85rem;
			text-align: right;
			color: #a36c3b;
			padding-right: 13px;
			position: relative;
		}

		.aui-well-item-fr:after {
			content: " ";
			display: inline-block;
			height: 7px;
			width: 7px;
			border-width: 3px 3px 0 0;
			border-color: #a36c3b;
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			position: relative;
			top: -2px;
			position: absolute;
			top: 50%;
			margin-top: -6px;
			right: 2px;
			border-radius: 2px;
		}

	}

	.aui-flex-chang {
		background: -webkit-linear-gradient(left, #ffefd6, #fde0b8);
		background: -o-linear-gradient(right, #ffefd6, #fde0b8);
		background: -moz-linear-gradient(right, #ffefd6, #fde0b8);
		background: linear-gradient(to right, #ffefd6, #fde0b8);
		background-color: #ffefd6;
		border-radius: 5px;
		margin: 0.5rem 1rem 0 1rem;
		padding: 0.5rem;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-lw {
		width: 26px;
		height: 26px;
		margin-right: 0.5rem;
	}

	.aui-lw image {
		width: 26px;
		height: 26px;
		margin-right: 0.5rem;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.aui-flex-box h3 {
		font-weight: normal;
		font-size: 0.85rem;
		color: #313236;
	}
	
	.vip-bg {
		background-image: url("https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/171718148557e1tBaK.png");
		background-repeat: no-repeat;
		background-size: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0px 15px 0px 15px;
		margin-bottom: 10px;
		margin: 10px;
		.taocan {
			color: #ffffff;
	
			.title {
				font-size: 30rpx;
				font-weight: bold;
				line-height: 33rpx;
			}
	
			.desc {
				font-size: 24rpx;
				font-weight: 500;
				line-height: 33rpx;
				padding-top: 19rpx;
			}
		}
	
		.cu-btn {
			height: 48rpx;
			width: 60px;
			text-align: center;
			background: linear-gradient(90deg, #ffefc9 0%, #e9c98d 100%);
			border-radius: 24rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #863f18;
			line-height: 48rpx;
		}
	}
	
	
</style>